<template>
    <div>
        <header-one></header-one>
        <el-button type="primary" icon="el-icon-d-arrow-left" @click="toEnd"
                   style="margin-top: 5px;margin-left: 5px;margin-bottom: 5px">返回主页
        </el-button>
        <div class="container">
            <div class="img-background" style="width: 800px;height: 600px; margin-left: 100px; margin-top: 2px;">
                <img class="img-background-img" :src="playImg" style="width: 100%;height: 100%;">
                <div id="bicycle_id"
                     style="width: 1000px; height: 700px; position: absolute; margin-top: -30px; margin-left: -110px;">
                    <img class="img-background-img" :src="bicycleImg" style="width: 100%;height: 100%;">
                </div>
                <div style="width: 800px;height: 600px; position:absolute;">
                    <!--顶部-->
                    <div style="margin-top: 5px;">
                        <div class="el-col-sm-8 el-col-md-8 el-col-lg-8">
                            <span style="background-color:#429efd;color: white;font-size: 36px; margin-left: 10px;">{{ptNm}}</span>
                        </div>
                        <div class="el-col-sm-8 el-col-md-8 el-col-lg-8" style="text-align: center">
                            <span style="background-color:#4293c6;color: white;font-size: 30px;">当前速度&nbsp;{{nowSpeed}}&nbsp;级</span>
                        </div>
                        <div class="el-col-sm-8 el-col-md-8 el-col-lg-8" @click="toEnd">
                            <span style="margin-left: 70px;">训练剩余时间：{{currentMin}} 分 {{currentS}} 秒</span>
                            <el-progress  style="width: 150px;height: 50px; margin-left: 100px;margin-top: 5px" :stroke-width="12" :percentage="percentage" :color="customColor" :show-text="false"></el-progress>
                            <!--<img src="@/assets/img/return.png" style="width: 50px;height: 50px; margin-left: 200px;"/>-->
                        </div>
                    </div>
                    <!--中部-->
                    <div style="margin-top: 50px">
                        <div class="el-col-sm-12 el-col-md-12 el-col-lg-12">
                            <div style="margin-top: 20px;">
                                <el-button type="primary" disabled style="font-size: 20px;background-color: #4293c6">
                                    痉挛监测
                                </el-button>
                            </div>
                            <div style="margin-top: 10px; margin-left: 10px;">
                                <el-radio-group v-model="spasmLevel" @change="changeSpasmLevel">
                                    <el-radio-button label="00">关闭&nbsp;&nbsp;&nbsp;&nbsp;</el-radio-button>
                                    <br>
                                    <el-radio-button label="01" style="margin-top: 4px">敏感&nbsp;&nbsp;&nbsp;&nbsp;
                                    </el-radio-button>
                                    <br>
                                    <el-radio-button label="02" style="margin-top: 4px">一般&nbsp;&nbsp;&nbsp;&nbsp;
                                    </el-radio-button>
                                    <br>
                                    <el-radio-button label="03" style="margin-top: 4px">弱敏感</el-radio-button>
                                    <br>
                                    <el-radio-button label="04" style="margin-top: 4px">不敏感</el-radio-button>
                                </el-radio-group>
                            </div>
                            <div style="margin-top: 10px;">
                                <el-button-group>
                                    <el-button disabled style="font-size: 26px;color: black">
                                        <img :src="leftImg" style="width: 30px;height: 42px;margin: 0 auto"/>
                                        <span style="">{{leftBlance}}</span>
                                    </el-button>
                                    <br>
                                    <el-button disabled style="font-size: 26px;margin-top: 10px;color: black">
                                        <img :src="rightImg" style="width: 32px;height: 44px;margin: 0 auto"/>
                                        <span style="">{{rightBlance}}</span>
                                    </el-button>
                                </el-button-group>
                            </div>
                        </div>
                        <div class="el-col-sm-12 el-col-md-12 el-col-lg-12">
                            <div style="margin-top: 20px; margin-left: 285px;">
                                <el-button-group>
                                    <el-button type="primary" style="font-size: 20px; margin-top: 5px;" :disabled="isbd"
                                               @click="changeModeType('00')">被&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;动
                                    </el-button>
                                    <el-button type="primary" style="font-size: 20px; margin-top: 5px;" :disabled="iszd"
                                               @click="changeModeType('01')">主&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;动
                                    </el-button>
                                    <el-button type="primary" style="font-size: 20px; margin-top: 5px;"
                                               :disabled="iszbd" @click="changeModeType('02')">主被结合
                                    </el-button>
                                    <el-button type="primary" v-if="spaceTime !== '03' && changeDir=='00'"
                                               style="font-size: 20px; margin-top: 20px; margin-left: 20px;"
                                                disabled="true">正转
                                    </el-button>
                                    <br>
                                    <el-button type="primary" v-if="spaceTime !== '03' && changeDir=='01'"
                                               style="font-size: 20px; margin-top: 20px; margin-left: 20px;"
                                               disabled="true">反转
                                    </el-button>

                                    <el-button type="primary" v-if="spaceTime == '03'"
                                               style="font-size: 20px; margin-top: 20px; margin-left: 20px;"
                                               @click="changeDirection('00')" :disabled="isright">正转
                                    </el-button>
                                    <br>
                                    <el-button type="primary" v-if="spaceTime == '03'"
                                               style="font-size: 20px; margin-top: 8px; margin-left: 20px;"
                                               @click="changeDirection('01')" :disabled="isleft">反转
                                    </el-button>

                                    <el-button type="primary" style="font-size: 16px; margin-top: 25px;">心率&nbsp;{{heartRate}}&nbsp;&nbsp;Hr</el-button>
                                    <el-button type="primary" style="font-size: 16px; margin-top: 20px;">血氧&nbsp;{{bloodLevel}}&nbsp;&nbsp;%</el-button>
                                </el-button-group>
                            </div>
                        </div>
                    </div>

                    <!--底部-->
                    <div style="margin-top: 50px">
                        <div class="el-col-sm-24 el-col-md-24 el-col-lg-24">
                            <div style="text-align: center; margin-top: 20px;">
                                <span style="">设置速度：</span>
                                <el-button style="font-size: 16px;" plain type="success" @click="downSpeed()"
                                           :disabled="isDownSpeed">-
                                </el-button>
                                <el-input readonly style="width: 10%; margin-left: 5px;" v-model="speed">{{speed}}
                                </el-input>
                                <el-button type="success" plain style="font-size: 16px; margin-left: 5px;"
                                           @click="upSpeed()" :disabled="isAddSpeed">+
                                </el-button>&nbsp;级

                                <span style="margin-left: 20px">设置阻力：</span>
                                <el-button style=" font-size: 16px;" plain type="success" @click="downDrag()"
                                           :disabled="isDownDrag">-
                                </el-button>
                                <el-input readonly style="width: 10%; margin-left: 5px;" v-model="drag">{{drag}}
                                </el-input>
                                <el-button type="success" plain style="font-size: 16px; margin-left: 5px;"
                                           @click="upDrag()" :disabled="isAddDrag">+
                                </el-button>&nbsp;级
                            </div>
                        </div>
                    </div>

                    <!--最底部-->
                    <div style="margin-top: 100px">
                        <div class="el-col-sm-24 el-col-md-24 el-col-lg-24">
                            <div style="text-align: center; margin-top: 14px;">
                                <el-button type="primary" @click="toPlay" style=" font-size: 20px;" :disabled="isStart">
                                    开始
                                </el-button>
                                <el-button type="primary" style=" font-size: 20px;" @click="toPause"
                                           :disabled="isPause">暂停
                                </el-button>
                                <el-button type="primary" style=" font-size: 20px;" @click="toNow" :disabled="isNow">
                                    继续
                                </el-button>
                                <el-button type="primary" style=" font-size: 20px;" @click="toEnd" :disabled="isEnd">
                                    结束
                                </el-button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import {
        toStart,
        toPause,
        toContinue,
        toEnd,
        toSpeed,
        toDrag,
        updSpasmLevel,
        setDirection,
        setModeType,
        getAll
    } from '../api/train';

    export default {
        name: 'patient',
        data() {
            return {
                setForm:this.$route.query,
                ptNm: localStorage.getItem('ptNm') == "" ? "000001" : localStorage.getItem('ptNm'),
                ptId: localStorage.getItem('ptId'),
                spaceTime:localStorage.getItem('spaceTime'),
                playImg: require("@/assets/img/video1.png"),
                bicycleImg: require("@/assets/img/a1.png"),
                /*痉挛检测 5个*/
                spasmLevel: "02",
                /*设置的运动方向*/
                speedText: "",
                /*左平衡度*/
                leftBlance: "0",
                rightBlance: "0",
                /*血氧度*/
                bloodLevel: "0",
                /*心率*/
                heartRate: "0",
                /*当前速度*/
                nowSpeed: "0",
                isStart: false,
                isPause: true,
                isNow: true,
                isEnd: true,
                speed: 1,
                drag: 1,
                isAddSpeed: false,
                isDownSpeed: true,
                isAddDrag: false,
                isDownDrag: true,
                isbd: true,
                iszd: false,
                iszbd: false,
                isright: true,
                isleft: false,
                timer: "",
                taskId: "",
                /*默认的运动类型 被动*/
                trainType: "00",
                /*默认的转向*/
                changeDir: "00",
                leftImg: require("@/assets/img/left.png"),
                rightImg: require("@/assets/img/right.png"),
                /*选中状态的运动模式*/
                modeTypebutton: 1,
                /*选中方向*/
                directionbutton: 1,
                percentage:0,
                customColor: '#44bcbc',
                //剩余训练时间
                currentMin: 0,
                currentS: 0
            }
        },
        mounted() {

        },
        methods: {
            /*开始*/
            toPlay() {
                /*设置被动*/
                this.changeModeType(this.trainType);
                /*设置正转*/
                this.changeDirection(this.changeDir);
                /*设置痉挛检测 --一般*/
                this.changeSpasmLevel(this.spasmLevel);
                /*开始运动*/
                toStart(this.setForm).then(res => {
                    if (res.success) {
                        this.playImg = require("@/assets/img/video1.gif");
                        this.bicycleImg = require("@/assets/img/bicycle.gif");
                        console.log("------------------调用开始接口成功------------");
                        this.taskId = res.data;
                        this.isStart = true;
                        this.isPause = false;
                        this.isNow = true;
                        this.isEnd = false;
                        this.isplay = true;
                        this.timer = window.setInterval(() => {
                            setTimeout(this.setAll(), 0);
                        }, 200);
                        this.$message.success('开始训练');
                    } else {
                        this.$message.error("开始失败！");
                    }
                });
            },
            /*暂停*/
            toPause() {
                toPause({"taskId": this.taskId}).then(res => {
                    if (res.success) {
                        this.playImg = require("@/assets/img/video1.png");
                        this.bicycleImg = require("@/assets/img/a1.png");
                        window.clearInterval(this.timer);
                        // let bicycleStyle = document.getElementById("bicycle_id");
                        // bicycleStyle.style.marginLeft = 10 + "px";
                        console.log("------------------调用暂停接口成功------------");
                        this.taskId = res.data;
                        this.isStart = true;
                        this.isPause = true;
                        this.isNow = false;
                        this.isEnd = false;
                        this.isplay = false;
                        this.$message.success('暂停训练');
                    } else {
                        this.$message.error("暂停失败！");
                    }
                });
            },
            /*继续*/
            toNow() {
                toContinue({"taskId": this.taskId}).then(res => {
                    if (res.success) {
                        this.playImg = require("@/assets/img/video1.gif");
                        this.bicycleImg = require("@/assets/img/bicycle.gif");
                        this.timer = window.setInterval(() => {
                            setTimeout(this.setAll(), 0);
                        }, 200);
                        // let bicycleStyle = document.getElementById("bicycle_id");
                        // bicycleStyle.style.marginLeft = 100 + "px";
                        console.log("------------------调用继续接口成功------------------");
                        this.isStart = true;
                        this.isPause = false;
                        this.isNow = true;
                        this.isEnd = false;
                        this.isplay = true;
                        this.$message.success('继续训练');
                    } else {
                        this.$message.error("继续训练失败！");
                    }
                });
            },
            /*结束*/
            toEnd() {
                this.$confirm('正在运动时,将停止运动返回主页，请确认是否继续？', '提示', {
                    type: 'warning'
                })
                    .then(() => {
                        /*结束*/
                        toEnd({"taskId": this.taskId}).then(res => {
                            this.playImg = require("@/assets/img/video1.png");
                            this.bicycleImg = require("@/assets/img/a1.png");
                            if (res.success === true) {
                                this.isplay = false;
                                localStorage.setItem('ptNm', "");
                                localStorage.setItem('ptId', "");
                                localStorage.setItem('spaceTime',"03");
                                window.clearInterval(this.timer);
                                this.taskId = "";
                                console.log("--------结束接口成功--------");
                                this.$message.success('训练结束！');
                                this.$router.push('/patientList');
                            } else {
                                this.isplay = false;
                                localStorage.setItem('ptNm', "");
                                localStorage.setItem('ptId', "");
                                window.clearInterval(this.timer);
                                this.taskId = "";
                                this.$message.error(res.data);
                                this.$router.push('/patientList');
                            }
                        });
                    })
                    .catch(() => {
                        this.$message({
                            message: '已取消操作'
                        });
                    });
            },
            /* 速度+*/
            upSpeed() {
                if (this.speed <= 60 && this.speed >= 1) {
                    // + -都不可再次点击
                    this.isAddSpeed = true;
                    this.isDownSpeed = true;
                    //发送速度 ++
                    toSpeed({setSpeed: this.speed + 1,trainingBody:"01"}).then(res => {
                        if (res.success == true) {
                            this.speed = this.speed + 1;
                            if (this.speed == 60) {//只能点击 -
                                this.isDownSpeed = false;
                            } else {
                                //可以点击 + -
                                this.isAddSpeed = false;
                                this.isDownSpeed = false;
                            }
                        } else {
                            //可以点击 + -
                            this.isAddSpeed = false;
                            this.isDownSpeed = false;
                            this.$message.error(res.data);
                        }
                    });
                }
            },
            /* 速度--*/
            downSpeed() {
                if (this.speed <= 60 && this.speed > 1) {
                    // + -都不可再次点击
                    this.isAddSpeed = true;
                    this.isDownSpeed = true;
                    //发送速度 ++
                    toSpeed({setSpeed: this.speed - 1,trainingBody:"01"}).then(res => {
                        if (res.success == true) {
                            this.speed = this.speed - 1;
                            if (this.speed == 0) {//只能点击 +
                                this.isAddSpeed = false;
                            } else {
                                //可以点击 + -
                                this.isAddSpeed = false;
                                this.isDownSpeed = false;
                            }
                        } else {
                            //可以点击 + -
                            this.isAddSpeed = false;
                            this.isDownSpeed = false;
                            this.$message.error(res.data);
                        }
                    });
                }
            },
            /* 阻力+*/
            upDrag() {
                if (this.drag <= 20 && this.drag >= 0) {
                    // + -都不可再次点击
                    this.isAddDrag = true;
                    this.isDownDrag = true;
                    //发送速度 ++
                    toDrag({setResistance: this.drag + 1,trainingBody:"01"}).then(res => {
                        if (res.success == true) {
                            this.drag = this.drag + 1;
                            if (this.drag == 20) {//只能点击 -
                                this.isDownDrag = false;
                            } else {
                                //可以点击 + -
                                this.isAddDrag = false;
                                this.isDownDrag = false;
                            }
                        } else {
                            //可以点击 + -
                            this.isAddDrag = false;
                            this.isDownDrag = false;
                            this.$message.error(res.data);
                        }
                    });
                }
            },
            /* 阻力--*/
            downDrag() {
                if (this.drag <= 20 && this.drag > 0) {
                    // + -都不可再次点击
                    this.isAddDrag = true;
                    this.isDownDrag = true;
                    //发送速度 ++
                    toDrag({setResistance: this.drag - 1,trainingBody:"01"}).then(res => {
                        if (res.success == true) {
                            this.drag = this.drag - 1;
                            if (this.drag == 1) {//只能点击 +
                                this.isAddDrag = false;
                            } else {
                                //可以点击 + -
                                this.isAddDrag = false;
                                this.isDownDrag = false;
                            }
                        } else {
                            //可以点击 + -
                            this.isAddDrag = false;
                            this.isDownDrag = false;
                            this.$message.error(res.data);
                        }
                    });
                }
            },
            /*修改痉挛检测值 5个*/
            changeSpasmLevel(val) {
                console.log("痉挛检测值----", val);
                updSpasmLevel({spasmLevel: val}).then(res => {
                    if (res.success == true) {
                        // this.$message.success("修改痉挛检测成功");
                    }
                });
            },
            /*运动方向*/
            changeDirection(val) {
                console.log("设置的运动方向----", val);
                setDirection({setDirection: val}).then(res => {
                    if (res.success == true) {
                        this.changeDir = val;
                        if (val == "00") {//正转
                            this.isright = true;
                            this.isleft = false;
                            this.directionbutton = 1;
                        }
                        if (val == "01") {//反转
                            this.isleft = true;
                            this.isright = false;
                            this.directionbutton = 2;
                        }
                        // this.$message.success("修改方向成功");
                    }
                });
            },
            /*运动类型*/
            changeModeType(val) {
                console.log("设置的运动模式----", val);
                setModeType({runModeTypeVal: val}).then(res => {
                    if (res.success == true) {
                        this.trainType = val;
                        if (val == "00") {//被动
                            this.isbd = true;
                            this.iszd = false;
                            this.iszbd = false;
                            /*选中*/
                            this.modeTypebutton = 1;
                        }
                        if (val == "01") {//主动
                            this.isbd = false;
                            this.iszd = true;
                            this.iszbd = false;
                            /*选中*/
                            this.modeTypebutton = 2;
                        }
                        if (val == "02") {//被主动
                            this.isbd = false;
                            this.iszd = false;
                            this.iszbd = true;
                            /*选中*/
                            this.modeTypebutton = 3;
                        }
                        // this.$message.success("修改运动模式成功");
                    }
                });
            },
            /*每100毫秒拿取数据*/
            setAll() {
                getAll({"taskId": this.taskId}).then(res => {
                    if (res.success == true) {
                        console.log("----res.data-============：",res.data);
                        /*如果不是暂停或者结束状态，循环播放视频*/
                        if (this.isplay == true && !res.data.instructions.energStop && !res.data.instructions.spasmFlag) {
                            this.playImg = require("@/assets/img/video1.gif");
                            this.bicycleImg = require("@/assets/img/bicycle.gif");
                        }else if (res.data.instructions.energStop || res.data.instructions.spasmFlag){// 急停 或痉挛
                            window.clearInterval(this.timer);
                            if (res.data.instructions.energStop){
                                this.$message.warning('设备意外停止，请检查是否按下紧急停止按钮');
                                this.nowSpeed=0;
                            }else if(res.data.instructions.spasmFlag){
                                this.$message.warning('患者发生痉挛，设备停止');
                            }
                            this.playImg = require("@/assets/img/video1.png");
                            this.bicycleImg = require("@/assets/img/a1.png");
                            //痉挛时 如果是关闭状态 修改为一般
                            if (this.spasmLevel=="00"){
                                this.spasmLevel="02";
                            }
                            this.isStart = true;
                            this.isPause = true;
                            this.isNow = false;
                            this.isEnd = false;
                            this.isplay = false;
                        }
                        /*当前速度*/
                        if (res.data.instructions.showInstruction.lowerCurrentSpeed == 328) {
                            this.nowSpeed = 0;
                        }else {
                            this.nowSpeed = res.data.instructions.showInstruction.lowerCurrentSpeed
                        }
                        /*心率*/
                        if (res.data.instructions.showInstruction.heartRate == 127) {
                            this.heartRate = 0;
                        } else {
                            this.heartRate = res.data.instructions.showInstruction.heartRate;
                        }
                        /*血氧度*/
                        if (res.data.instructions.showInstruction.bloodLevel == 127) {
                            this.bloodLevel = 0;
                        } else {
                            this.bloodLevel = res.data.instructions.showInstruction.bloodLevel;
                        }
                        /*平衡度*/
                        this.leftBlance = res.data.instructions.showInstruction.lowerLeftBalance;
                        this.rightBlance = res.data.instructions.showInstruction.lowerRightBalance;
                        //00： 正转  01：反转
                        this.changeDir=res.data.instructions.showInstruction.lowerCurrentSpeedText;
                        console.log("-----this.changeDir----------",this.changeDir);
                        this.percentage=(res.data.current/(this.setForm.trainingDuration*60))*100;
                        //剩余训练时间
                        this.currentMin=Math.floor((this.setForm.trainingDuration*60-res.data.current)/60);
                        this.currentS = (this.setForm.trainingDuration*60-res.data.current)%60;
                        let bicycleStyle = document.getElementById("bicycle_id");
                        if (this.leftBlance != null && this.rightBlance != null) {
                            let value = this.leftBlance - this.rightBlance;
                            if (value >= 50) {
                                bicycleStyle.style.marginLeft = -410 + "px";
                            } else if (value <= -50) {
                                bicycleStyle.style.marginLeft = 190 + "px";
                            } else if (value < 50 && value > -50) {
                                console.log("获取到的平衡度:", -110 + (value * 6));
                                bicycleStyle.style.marginLeft = -110 + (value * 6) + "px";
                            }
                        }
                    } else {
                        this.playImg = require("@/assets/img/video1.png");
                        this.bicycleImg = require("@/assets/img/a1.png");
                        localStorage.setItem('ptNm', "");
                        localStorage.setItem('ptId', "");
                        this.taskId = "";
                        window.clearInterval(this.timer);
                        this.$message.success('结束训练成功');
                        this.$router.push('/patientList');
                    }
                });
            },
        }
    }
</script>
<style scoped>
    .play {
        background-color: #cf9236;
    }

    .img-background {
        position: relative;
    }

    .img-background-img {
        position: absolute;
    }
</style>
